@babel/helper-module-imports

What is @babel/helper-module-imports?

The @babel/helper-module-imports package is a utility that allows Babel plugins to add module imports to a file in a consistent way. It provides functions to programmatically add import statements or require calls within the code being transformed by Babel.

What are @babel/helper-module-imports's main functionalities?

addDefault

Adds a default import statement to the file. For example, it can add `import lodash from 'lodash';` to the code.

import { addDefault } from '@babel/helper-module-imports';
const path = /* ... */;
const imported = addDefault(path, 'lodash', { nameHint: 'lodash' });

addNamed

Adds a named import statement to the file. For example, it can add `import { map } from 'lodash';` to the code.

import { addNamed } from '@babel/helper-module-imports';
const path = /* ... */;
const imported = addNamed(path, 'map', 'lodash', { nameHint: 'map' });

addNamespace

Adds a namespace import statement to the file. For example, it can add `import * as lodash from 'lodash';` to the code.

import { addNamespace } from '@babel/helper-module-imports';
const path = /* ... */;
const imported = addNamespace(path, 'lodash', { nameHint: 'lodash' });

addSideEffect

Adds an import statement that will include a module for its side effects only, without importing any bindings. For example, it can add `import 'normalize.css';` to the code.

import { addSideEffect } from '@babel/helper-module-imports';
const path = /* ... */;
addSideEffect(path, 'normalize.css');

Other packages similar to @babel/helper-module-imports

babel-plugin-import

A Babel plugin that allows you to import components from libraries in a modular way, often used with UI libraries like Ant Design. It can transform named imports to individual path imports to reduce bundle size, which is a different approach compared to @babel/helper-module-imports that focuses on adding imports programmatically within Babel plugins.

babel-plugin-module-resolver

A Babel plugin that allows you to add aliases for imports in your project, making it easier to manage paths. It can be used to rewrite the paths of imports and requires, which is different from @babel/helper-module-imports that is used to add new imports rather than modify existing ones.

babel-plugin-transform-imports

This plugin transforms member style imports (e.g., `import { map } from 'lodash'`) into default import style imports (e.g., `import map from 'lodash/map'`). This can help with reducing bundle sizes by only including the parts of a module that are used. It serves a different purpose than @babel/helper-module-imports, which is more about adding imports rather than optimizing them.

README

@babel/helper-module-imports

Babel helper functions for inserting module loads

See our website @babel/helper-module-imports for more information.

Install

Using npm:

npm install --save @babel/helper-module-imports

or using yarn:

yarn add @babel/helper-module-imports

Changelog

v7.25.9 (2024-10-22)

:bug: Bug Fix

• babel-parser, babel-template, babel-types
  • #16905 fix: Keep type annotations in syntacticPlaceholders mode (@liuxingbaoyu)
• babel-helper-compilation-targets, babel-preset-env
  • #16907 fix: support BROWSERSLIST{,_CONFIG} env (@JLHwung)
• Other
  • #16884 Analyze ClassAccessorProperty to prevent the no-undef rule (@victorenator)

:house: Internal

• babel-helper-transform-fixture-test-runner
  • #16914 remove test options flaky (@JLHwung)

:running_woman: Performance

• babel-parser, babel-types
  • #16918 perf: Make VISITOR_KEYS etc. faster to access (@liuxingbaoyu)